<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item
        disabled
        title="综合"
      />
      <van-dropdown-item @change='priceChange' title="价格" v-model="pricevalue" :options="option2" />
      <van-dropdown-item @change='categoryChange' title="分类" v-model="categoryvalue" :options="filterCategory" />
    </van-dropdown-menu>

    <van-empty v-if="GoodLists.length == 0"
      class="custom-image"
      image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
      description="没有搜索的商品"
    />

    <Products v-else
    :GoodLists="GoodLists"></Products>
  </div>
</template>

<script>
import Products from "../components/Products";
export default {
  data() {
    return {
      categoryvalue: '',
      pricevalue:'desc',
      option2: [
        { text: "价格由高到低", value: 'desc' },
        { text: "价格由低到高", value: 'asc'},
      ],
    };
  },
  props: ["GoodLists", "filterCategory" ],
  //数据挂在完毕时，遍历filterCategory数组，看看哪一项checked为true
  //便利的时候，遇到checked为true，就把value改成他的value，这样他就被选中了
  beforeUpdate(){
    this.filterCategory.map(item =>{
      if(item.checked ){
        this.categoryvalue = item.value;
        
        return
      }
    })
  },
  components: {
    Products,
  },
  methods:{
    categoryChange(value){
      this.$emit('categoryChange',value)
    },
    priceChange(value){
      this.$emit('priceChange',value)
    }
  }
};
</script>
 
<style lang = "less" scoped>

</style>